<template>
  <view class="goods-list">
    <my-goods v-for="(item, i) in goodsList" :key="i" :goods="item"></my-goods>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 请求参数对象
        queryObj: {
          // 查询关键词
          query: '',
          // 商品分类Id
          cid: '',
          // 页码值
          pagenum: 1,
          // 每页显示多少条数据
          pagesize: 10
        },
        // 商品列表的数据
        goodsList: [],
        // 总数量，用来判断数据是否请求完毕
        total: 0,
        // #1 节流，准备变量
        isLoading: false
      };
    },
    onLoad(options) {
      // 接收外界传递过来的参数
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      // 根据查询参数请求数据并存储到 data 中
      this.getGoodsList()
    },
    methods: {
      async getGoodsList(callback) {
        // #2 节流，把 isLoading 变为 true，表示正在请求中
        this.isLoading = true
        const {
          data: res
        } = await uni.$http.get('/goods/search', this.queryObj)
        if (res.meta.status !== 200) return uni.$showMsg()
        const {
          goods,
          total
        } = res.message
        // 数据叠加
        this.goodsList = [...this.goodsList, ...goods]
        this.total = total
        // #4 节流，把 isLoading 变为 false,表示请求下一次数据
        this.isLoading = false
        callback && callback()
      }
    },
    onReachBottom() {
      // #5 优化
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.showToast({
        title: '请求完毕'
      })
      // #3 节流，判断
      if (this.isLoading) return uni.showToast({
        title: '请求中...'
      })
      // 所谓上拉加载，无非是在页面加一的基础上，重新请求一下数据
      this.queryObj.pagenum++
      this.getGoodsList()
    },
    onPullDownRefresh() {
      // 所谓下拉刷新，无非是在重置查询条件的基础上，重新请求一下数据而已
      this.queryObj.pagenum = 1
      this.queryObj.pagesize = 10
      // 清空之前的数据
      this.goodsList = []
      this.isloading = false
      this.total = 0
      this.getGoodsList(() => {
        uni.stopPullDownRefresh()
      })
    }
  }
</script>

<style lang="scss">
  .goods-list {
    border: 1rpx solid #efefef;
    margin: 0 8rpx;
  }
</style>
